<template>
  <div>
    <el-select
      filterable
      v-model="selectValue"
      @change="handleChange"
      clearable
      multiple
      class="mb20 mr20"
      style="width: 40%"
    >
      <el-option
        v-for="(item,index) in selectData"
        :key="index"
        :label="item.internalTypeName"
        :value="item.internalTypeId"
      />
    </el-select>
    <el-tooltip
      class="item"
      effect="light"
      content="下拉选择分类后，穿梭框左侧展示相应数据，勾选点击按钮到右侧，点击下一步"
      placement="top"
    >
      <i class="fs16 el-icon-warning-outline"></i>
    </el-tooltip>
    <x-transfer
      @postData="handlePostData"
      :titles="['待选考评项目', '已选考评项目']"
      :from="fromData"
      :to="toData"
      class="mt20"
      ref="xTransfer"
    />
  </div>
</template>

<script>
import XTransfer from '@/components/XTransfer'
import { getEvalParent, schemeCreate, evalItemGet } from '@/api/eval'
import { defineAll, getInternalItem } from '@/api/satisfaction'

export default {
  components: {
    XTransfer
  },
  data() {
    return {
      selectValue: null,
      fromData: [],
      toData: [],
      selectData: [],
      value: null,
      saveArr: [],
      type: this.$route.params.type
    }
  },
  mounted() {
    // getEvalParent().then(res => {
    //   this.selectData = res.data
    // })
    // defineAll().then(res => {
    //   let arr = res.data
    //   arr.map(v => {
    //     v.key = v.internalItemId
    //     v.label = v.internalItemName
    //     // this.toData.push(v.evalItemId)
    //   })
    //   this.fromData = [...arr]
    // })
  },
  methods: {
    async postType(num) {
      const res = await getInternalItem({ internalItemType: num })
      this.selectData = res.data
    },
    getArrData() {
      this.$emit('postArrData', this.toData)
    },
    // 编辑回显数据
    parSetArr(arr) {
      if (arr.length > 0) {
        this.$nextTick(() => {
          arr.map(v => {
            v.key = v.internalItemId
            v.label = v.internalItemName
            // this.toData.push(v.evalItemId)
          })
          this.toData = [...arr]
        })
      }
    },
    // XTransfer 传递出来的数据
    handlePostData(arr) {
      this.toData = [...arr]
    },
    // 下拉框切换 fromData 数据
    async handleChange(val) {
      let arr = []
      if (val) {
        this.selectData.map(v => {
          val.map(j => {
            if (v.internalTypeId === j) {
              arr = [...arr, ...v.internalItems]
              arr.map(v => {
                v.key = v.internalItemId
                v.label = v.internalItemName
              })
              this.$nextTick(() => {
                this.fromData = [...arr]
                this.saveArr = [...arr]
              })
            }
          })
        })
      } else {
        this.fromData = []
        this.saveArr = []
      }
    },
    // 第一步选择模板之后，给到右边的数据
    setArr(arr) {
      if (this.type === 'add') {
        this.toData = [...arr]
      }
    },
    postData() {
      this.$refs.xTransfer.postToData()
      if (this.toData.length > 0) {
        let arr = []
        this.toData.map(j => {
          arr.push({ internalItemId: j.key })
        })
        this.$emit('postData', true, arr, 2)
        return false
      } else {
        this.$message.error('请至少选择一条')
        this.$emit('notSubmit', 2)
      }
    }
  }
}
</script>
